<template>
  <l-map :style="{height:height,width:width}" :zoom="zoom" :center="center" @click="handelClick">
    <l-tile-layer :url="url" :attribution="attribution" />
    <l-marker v-for="(item,index) in maplist" :key="index" :lat-lng="L.latLng(item.lat, item.lng)">
      <l-popup v-if="item.taskName" :content="item.taskName" />
    </l-marker>
  </l-map>
</template>
<script>
import L from 'leaflet'
import { LMap, LTileLayer, LMarker, LPopup } from 'vue2-leaflet'
delete L.Icon.Default.prototype._getIconUrl
L.Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png')
})
export default {
  name: 'Leaflet',
  components: {
    LMap,
    LTileLayer,
    LMarker,
    LPopup
  },
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '200px'
    },
    maplist: {
      type: Array,
      default: () => []
    }
  },

  data() {
    return {
      L: L,
      zoom: 6,
      center: L.latLng(30, 120),
      url: 'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }
  },
  mounted() {

  },
  destroyed() {
    this.L = null
  },
  methods: {
    handelClick(e) {
      this.$emit('mapdata', e)
    }
  }
}
</script>
<style  scoped>
.map {
  width: 100%;
}
</style>
